<template>
  <div>
    <div style="width: 800px; position: relative; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                 background: linear-gradient(#feeae6, #ffffff); padding-top: 20px; padding-bottom: 35px">
      <img src="../密码安全.png" style="height: 120px">
      <span style="position: absolute; bottom: 75px; left: 363px; font-size: 40px; color: white">100</span>
      <span style="position: absolute; bottom: 10px; left: 270px; font-size: 10px; color: black;" >为了更好的保障您账号的安全，请您继续完善：设置密码</span>

    </div>
    <div style="width: 800px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, 0.4); margin-top: 30px">
      <div  style="padding-top: 30px; padding-bottom: 10px; font-size: 28px; font-family: 楷体; font-weight: bolder; margin-left: -76%">
        账号设置
      </div>

      <div style="width: 500px; margin-top: 25px; margin-left: 120px; padding-bottom: 20px">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="密码">
            <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
            <div style="float: right">
              存在风险，请设置密码
              <router-link :to="{path: '/person/setting/password'}">
                <el-button> 设置密码</el-button>
              </router-link>
            </div>
          </el-form-item>
          <el-form-item label="手机号">
            <div style="float: right">
              {{ user.phone }}
              <router-link :to="{path: '/person/setting/phone'}">
                <el-button> 修改手机 </el-button>
              </router-link>
            </div>
          </el-form-item>
          <el-form-item label="邮箱">
            <label slot="label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
            <div style="float: right">
              {{ user.email }}
              <router-link :to="{path: '/person/setting/email'}">
                <el-button> 修改邮箱 </el-button>
              </router-link>
            </div>
          </el-form-item>
          <el-form-item label="三方账号">
            <div style="float: right">
              暂无
              <el-button>绑定/解绑</el-button>
            </div>
          </el-form-item>
          <el-form-item label="登录记录">
            <div style="float: right">
              <span v-if="isShowLoginDate">
                {{user.login_date}}
              </span>
              <el-button @click="showLoginDate()">查看记录</el-button>
            </div>
          </el-form-item>
          <el-form-item label="账号注销">
            <div style="float: right">
              <router-link :to="{path: '/person/setting/destroy'}">
                <el-button> 立即注销 </el-button>
              </router-link>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "PersonSettingHome",
  data(){
    return{
      user: {},
      form: {},
      isShowLoginDate: false,
    }
  },
  methods: {
    getCurrentUser: function () {
      this.user = {
        id: 1111,
        name: "重生之我是超级VIP转世重生之我是超级VIP转世重生之我是超级VIP转世重生之我是超级VIP",
        phone: "15399999999",
        email: "1799999999@qq.com",
        login_date: "2023-03-08 09:35"
      }
      // 手机号加密
      this.user.phone = this.user.phone.replace(/(\d{3})\d*(\d{4})/,"$1****$2")

      // 邮箱加密
      let str = this.user.email.split("@");
      this.user.email = str[0].substr(0, 4) + "*****" + "@" + str[1];

      this.form = JSON.parse(JSON.stringify(this.user));
    },
    resetForm: function (){
      this.form = JSON.parse(JSON.stringify(this.user));
      console.log(this.user)
    },
    submitForm: function (){
      // todo 用户昵称正则表达式判断

      // 调用用户更新接口
    },
    showLoginDate: function () {
      this.isShowLoginDate = !this.isShowLoginDate
    }
  },
  mounted() {
    this.getCurrentUser();
  }
}
</script>

<style scoped>
.el-button{
  margin-left: 20px;
}
</style>